<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('关键条款') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('条款类型')" prop="type">
        <el-select v-model="queryParams.type" :placeholder="$t('条款类型')" clearable>
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="$t(dict.dictLabel)"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('提醒人')" prop="remindUserId">
        <UserSelect v-model="queryParams.remindUserId" :placeholder="$t('提醒人')" />
      </el-form-item>
      <el-form-item :label="$t('关联合同')" prop="associatedContract">
        <el-select v-model="queryParams.associatedContract" value="" :placeholder="$t('关联合同')" filterable clearable>
          <el-option
            v-for="(item, index) in associatedContractDict"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="[hasPermi + 'edit']"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addHandle('')"
        >{{ $t("新增") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="[hasPermi + 'edit']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="[hasPermi + 'edit']"
          type="success"
          icon="el-icon-setting"
          size="mini"
          @click="openReminder"
        >{{ $t("默认提醒人") }}</el-button>
      </el-col>
    </el-row>

    <div v-if="!isEmpty(dealTermsDebtList)" style="margin-top: 20px">
      <div v-for="(v, k) in dealTermsDebtList" :key="k" v-loading="loading" class="mb10 mt10">
        <div class="term-tit" style="cursor: pointer;">
          <i class="el-icon-menu" />{{ $t(typeFormat(k)) }}<i class="el-icon-circle-plus-outline pointer" @click="addHandle(k)" />
        </div>
        <div v-for="j in v" :key="j.id" class="term-remark pointer">
          <el-tooltip class="item" effect="dark" :content="j.remark" placement="top-start">
            <div
              class="remark"
              style="cursor: pointer;"
              @click="updateHandle(j)"
              v-html="j.remark"
            />
          </el-tooltip>
          <div class="bottom">
            <div class="left" style="cursor: pointer;" @click="updateHandle(j)">
              <span>
                {{ $t('提醒时间') }}: {{ parseTime(j.remindTime, '{y}-{m}-{d} {h}:{i}') || '无' }}
              </span>
              <span>
                {{ $t('提醒人') }}: {{ j.userName || '无' }}
              </span>
              <span>
                {{ $t('关联合同') }}: {{ j.contractName || '无' }}
              </span>
              <span class="tag" :class="j.isTrigger">{{ $t(isTriggerDict(j.isTrigger)) }}</span>
            </div>
            <div class="del" style="cursor: pointer;" @click="deleteHandle(j)">{{ $t('删除') }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="margin-top: 20px;min-height: 450px;" class="noneData">
      <div v-loading="loading">
        <svg-icon icon-class="none" class-name="none-icon" />
        <p>{{ $t('暂无数据') }}</p>
      </div>
    </div>

    <!-- 添加或修改项目合同关键条款对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealTermsDebtForm ref="dealTermsDebtForm" :has-permi="hasPermi" />
    </el-dialog>

    <el-dialog :title="$t(title)" :visible.sync="dealTermsReminderOpen" width="600" style="height: 350px; width: 600px; margin: auto !important;" :close-on-click-modal="false" custom-class="dialogForm" append-to-body>
      <dealTermsReminder ref="dealTermsReminder" :has-permi="hasPermi" />
    </el-dialog>
  </div>
</template>

<script>
import { findListTreeTerms, delDealTermsDebt, exportDealTermsDebt } from '@/api/deal/terms/debt/dealTermsDebt'
import dealTermsDebtForm from './dealTermsDebtForm.vue'
import dealTermsReminder from '@/views/deal/terms/reminder/dealTermsReminder.vue'
import { findByActStatusAndDealId } from '@/api/deal/contract/dealContract'
export default {
    components: {
      dealTermsReminder,
      dealTermsDebtForm
    },
  props: {
    hasPermi: {
      type: String,
      default: () => '',
      required: true
    }
  },
  data() {
      return {
          dealTermsReminderOpen: false,
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 项目合同关键条款表格数据
          dealTermsDebtList: [],
        // 关联合同下拉
        associatedContractDict: [],
          // 弹出层标题
          title: '关键条款',
          // 是否显示弹出层
          formOpen: false,
        // 条款类型字典
        typeOptions: [],
        // 是否触发字典
        isTriggerOptions: [],
          // 查询参数
          queryParams: {
              type: undefined,
              remindUserId: undefined,
              associatedContract: undefined,
              dealId: this.$route.query.id
              // pageNum: 1,
              // pageSize: 10
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {}
      }
  },
  created() {
      this.getList()
      this.getDicts('key_terms_status').then(response => {
          this.isTriggerOptions = response.data
      })
      findByActStatusAndDealId(this.$route.query.id).then(response => {
        this.associatedContractDict = response.data
      })
  },
  methods: {
    /** 查询项目合同关键条款列表 */
    getList() {
        this.loading = true
        findListTreeTerms(this.queryParams).then(response => {
            this.dealTermsDebtList = response.data
            // 先从url里获取是那种项目, 获取不到在查表
            var dealType = this.$route.query.dealType
            this.getDictDealType(dealType)
            this.loading = false
        })
    },
    isTriggerDict(value) {
      var datas = this.isTriggerOptions
      var actions = []
      Object.keys(datas).map((key) => {
        if (datas[key].dictValue === ('' + value)) {
          var temp = datas[key].dictLabel
          actions.push(this.$t(this.isEmpty(temp) ? '' : temp.replace('触发-', '')))
          return false
        }
      })
      return actions.join('')
    },
    // 不同位置展示不同条款类型
    getDictDealType() {
      // 股权, 债权 条款类型
      if (this.$route.query.dealType === 'bf') {
        this.getDicts('key_terms_type_bf').then(response => {
          this.typeOptions = response.data
        })
      } else {
        // 参股基金条款类型
        this.getDicts('key_terms_tyoe').then(response => {
          this.typeOptions = response.data
        })
      }
    },
    // 条款类型字典翻译
    typeFormat(row) {
      return this.selectDictLabel(this.typeOptions, row)
    },
    // 是否触发字典翻译
    isTriggerFormat(row) {
      return this.selectDictLabel(this.isTriggerOptions, row.isTrigger)
    },

    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            parentId: undefined,
            dealId: undefined,
            type: undefined,
            remindTime: undefined,
            remindUserId: undefined,
            associatedContract: undefined,
            abstracts: undefined,
            isTrigger: undefined,
            triggerTime: undefined,
            responseMethod: undefined,
            remark: undefined,
            createBy: undefined,
            updateBy: undefined,
            createTime: undefined,
            updateTime: undefined,
            delFlag: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle(type) {
        this.formOpen = true
        this.$nextTick(() => {
            this.$refs.dealTermsDebtForm.init(null)
            if (type) {
              this.$refs.dealTermsDebtForm.form.type = type
            }
        })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        this.$nextTick(() => {
            // 调用form页面的 init 方法初始化数据
            this.$refs.dealTermsDebtForm.init(row)
        })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return delDealTermsDebt(row.id)
        }).then(() => {
            this.getList()
            this.msgSuccess(this.$t('删除成功'))
        }).catch(function() {
        })
    },
    /** 导出按钮操作 */
    exportHandle() {
        const queryParams = this.queryParams
        this.$confirm(this.$t('是否确认导出?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
        }).then(function() {
            return exportDealTermsDebt(queryParams)
        }).then(response => {
            this.download(response.msg)
        }).catch(function() {
        })
    },
    // 设置默认提醒人
    openReminder() {
      this.dealTermsReminderOpen = true
      this.title = '默认提醒人'
      this.$nextTick(() => {
        this.$refs.dealTermsReminder.init()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tag{
  font-size: 11px;
  overflow: hidden;
  padding: 3px 15px;
  border-radius: 15px;
}
.WCF{
  background: #CFCFD2;
  color: #434245;
}
.YCL{
  background: linear-gradient(to right,#69CD8F,#89E4BF);
  color: #fff;
}
.WCL{
  background: linear-gradient(to right,#E58F43,#F1B94A);
  color: #fff;
}
.term-tit{
  font-size: 15px;
  color: #333;
  text-align: left;
  line-height: 21px;
  padding-right: 16px;
  font-weight: 600;
  margin: 10px 0;
  display: flex;
  align-items: center;
  column-gap: 4px;
  i{
    color: #409EFF;
  }
}
.term-remark{
  position: relative;
  margin: 0 30px 20px;
  overflow: hidden;
  border-bottom: 1px solid #E7E8EC;
  padding-bottom: 20px;
  .remark{
    line-height: 20px;
    margin: 0;
    white-space: pre-wrap;
    font-size: 13px;
    color: #000;
    // white-space: normal;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .left {
    color: rgba(0,0,0, .65);
    font-size: 12px;
    span{
      margin-right: 10px;
    }
  }
  .del{
    color: #F90400;
    border: 1px solid #F90400;
    padding: 3px 15px;
    font-size: 12px;
  }
}
.mt10{
  margin-top: 10px;
}
</style>
